<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模拟用户登录系统</title>
		<link rel="stylesheet" href="css/bootstrap.min.css"/>
		<style>
			.container{
				width: 300px;
			}
		</style>
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div class="container">
			<h3>用户登陆系统</h3>
			<div style="display: none;" id="msg"></div>
			
			<div class="form-group">
				<label>用户名:</label>
				<input type="text" name="username" id="username" class="form-control" autocomplete="off" placeholder="请输入用户名..." />
			</div>
			
			<div class="form-group">
				<label>密码:</label>
				<input type="password" name="password" id="password" class="form-control" placeholder="请输入密码..." />
			</div>
			
			<div>
				<button id="btnSubmit" class="btn btn-success" onclick="doSubmit()">登录</button>
				<button id="btnClear" class="btn btn-danger" onclick="doClear()">清空</button>
			</div>
		</div>
	</body>
	
	<script>
		function doSubmit(){
			// var username = document.getElementById('username');
			// console.log(username.value);
			var username = $("#username");
			
			// var password = document.getElementById('password');
			// console.log(password.value);
			
			// var msg = document.getElementById('msg');
			// msg.innerText = username.value+'登陆成功';
			// msg.style = "display: block; color: white; background-color: green; margin: 10px; padding: 10px;";
			var msg = $("#msg");
			msg.text( username.val()+"登陆成功" );
			msg.css("display","block");
			msg.css("color","white");
			msg.css("background-color","green");
			msg.css("margin","10px");
			msg.css("padding","10px");
		}
		
		function doClear(){
			// document.getElementById('username').value = '';
			// document.getElementById('password').value = '';
			$("#username").val('');
			$("#password").val('');
		}
		
	</script>
	
</html>
